<template>
  <div class="HomeView">
    <a-spin
      :spinning="spinning"
      :indicator="indicator"
      style="height: 100vh"
      wrapperClassName="spinclass"
      tip="数据拉取中..."
    >
      <!-- <div style="height: calc(( 100vw - 80px ) * .01);width: 100%;"></div> -->
      <!-- 第一排 -->
      <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
        <!-- 第一个 -->
        <div class="databox box-shadow" style="width: 31.5%; height: auto">
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            区县-价格
          </h2>
          <p class="mb-0 flex">重庆市区县平均价格排名Top7</p>
          <apex-chart
            width="100%"
            :options="area_price.chartOptions"
            type="bar"
            :series="area_price.series"
          ></apex-chart>
          <div class="flexbox flexrow">
            <div style="display: none" id="newCharts"></div>
            <div v-if="false" id="horizontalCharts2"></div>
          </div>
        </div>
        <!-- 第二个 -->
        <div class="databox box-shadow" style="width: 31.5%; height: auto">
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            小区-价格
          </h2>
          <p class="mb-0 flex">重庆市小区平均价格排名Top7</p>
          <apex-chart
            width="100%"
            :options="comm_price.chartOptions"
            type="bar"
            :series="comm_price.series"
          ></apex-chart>
          <div class="flexbox flexrow">
            <div v-if="false" id="horizontalCharts"></div>
          </div>
        </div>
        <div
          v-if="false"
          class="databox box-shadow"
          style="width: 40%; height: 20rem"
        >
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            区县-价格
          </h2>
          <p class="mb-0 flex">重庆市二手房单价与建筑面积散点图</p>
          <div class="flexbox flexrow">
            <!-- <div style="width: 50%; overflow: hidden"></div> -->
            <!-- <div id="scatterCharts"></div> -->
            <div id="scatterCharts2"></div>
          </div>
        </div>
        <!-- 第三个 -->
        <div class="databox box-shadow" style="width: 31.5%; height: auto">
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            房源-数量
          </h2>
          <p class="mb-0 flex">重庆市各区县房源数量</p>
          <div>
            <apex-chart
              width="100%"
              :options="qx_fy_list.chartOptions"
              type="treemap"
              :series="qx_fy_list.series"
            ></apex-chart>
          </div>
        </div>
      </div>
      <!-- 第二排 -->
      <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
        <!-- 第一项 -->
        <div class="databox box-shadow" style="width: 25%; height: auto">
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            装修情况分布
          </h2>
          <p class="mb-0 flex">重庆市各区县装修情况</p>
          <div class="flexbox flexrow">
            <div id="cqdecoration"></div>
          </div>
        </div>
        <!-- 第二项 -->
        <div class="databox box-shadow" style="width: 30%; height: auto">
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            房屋用途分布
          </h2>
          <p class="mb-0 flex">重庆市各区县房屋用途</p>
          <div class="flexbox flexrow">
            <div id="houseusedecoration"></div>
          </div>
        </div>
        <!-- 第三项 -->
        <div class="databox box-shadow" style="width: 40%; height: auto">
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            房屋朝向分布
          </h2>
          <p class="mb-0 flex">重庆市二手房房屋朝向分布图</p>
          <!-- <div>
          <apex-chart
            height="370"
            :options="orientation_charts_option.chartOptions"
            type="radialBar"
            :series="orientation_charts_option.series"
          ></apex-chart>
          
        </div> -->
          <div class="flexbox flexrow">
            <div id="houseorientation"></div>
          </div>
        </div>
      </div>
      <!-- 第三排 -->
      <div class="flexbox" style="margin-top: calc((100vw - 80px) * 0.01)">
        <!-- 第一项 -->
        <!-- <div class="databox box-shadow" style="width: 25%; height: auto">
        <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
          房源-数量
        </h2>
        <p class="mb-0 flex">重庆市各区县房源数量</p>
        <div>
          <apex-chart
            type="radar"
            height="400"
            :options="statisticsRadar.chartOptions"
            :series="statisticsRadar.series"
          />
        </div>
      </div> -->
        <!-- 第二项 -->
        <div class="databox box-shadow" style="width: 56%; height: auto">
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            价格-走势
          </h2>
          <p class="mb-0 flex">重庆市近十年房价趋势图</p>
          <div>
            <apex-chart
              width="100%"
              height="370"
              :options="house_price_change.chartOptions"
              type="line"
              :series="house_price_change.series"
            ></apex-chart>
          </div>
        </div>
        <!-- 第三项 -->
        <div class="databox box-shadow" style="width: 40%; height: auto">
          <h2 style="font-weight: 600; color: rgb(51, 51, 51); display: flex">
            价格-区间
          </h2>
          <p class="mb-0 flex">重庆市二手房单价区间</p>
          <div>
            <apex-chart
              height="370"
              :options="danjia_charts_option.chartOptions"
              type="bar"
              :series="danjia_charts_option.series"
            ></apex-chart>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
// import * as echarts from 'echarts';
import axios from "axios";
const base = process.env.NODE_ENV === "development" ? "/api" : "";
import {
  apex_treemap,
  apex_radialBar,
  apex_bar_horizontal,
  apex_datetime_line,
} from "./functions/generalFunction.js";
export default {
  data() {
    return {
      formatter: "￥{value}",
      series: [70, 52, 26, 70],
      orientation_charts_option: {},
      danjia_charts_option: {},
      house_price_change: {},
      area_price: {},
      comm_price: {},
      qx_fy_list: {},
      echartTest: null,
      spinning: false,
      indicator: (
        <a-icon type="loading" style="font-size: 24px;color:#887ef2" spin />
      ),
    };
  },
  mounted() {
    this.basic_config_load();
    this.showLines();
    this.showhorizontalLine();
  },
  methods: {
    // 展示折线图
    showLines() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("newCharts")); //也可以通过$refs.newCharts的方式去获取到dom实例。
      var option;

      option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2", "4", "6", "8", "10", "12", "14"],
          axisLabel: {
            textStyle: {
              color: "gray", // 将字体颜色设置为黑色
              fontSize: 10, // 将字体大小设置为14像素
              fontWeight: "bold", // 将字体粗细设置为粗体
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {
              color: "#6b9dfe",
            },
            lineStyle: {
              width: 0, // 将线条粗细设置为3像素
            },
            symbol: "none",
          },
          {
            data: [550, 560, 880, 1900, 1135, 547, 260],
            type: "line",
            lineStyle: {
              color: "#6b9dfe",
              width: 3, // 将线条粗细设置为3像素
            },
            symbol: "none",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 通用展示柱状图
    general_showhorizontalLine(id, series, labels, left) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id)); //也可以通过refs.newCharts的方式去获取到dom实例。
      var option;

      option = {
        grid: {
          top: 10,
          bottom: 0,
          right: 0,
          left,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: labels,
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "white",
          formatter: function (params) {
            return params.name + ": " + params.value;
          },
          position: function (pos, params, el, elRect, size) {
            var obj = { top: 60 };
            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 5;
            return obj;
          },
        },
        series: [
          {
            type: "bar",
            data: series,
            itemStyle: {
              normal: {
                color: "#7367F0",
              },
            },
            label: {
              show: true,
              position: "insideRight",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 通用展示南丁格尔玫瑰图
    general_pie_ndger(id, series) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(id)); //也可以通过refs.newCharts的方式去获取到dom实例。
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        color: [
          "#7961F9",
          "#FF9F43",
          "#EA5455",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: series,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 基本配置
    basic_config_load() {
      const options = { method: "GET", url: base + "main" };
      this.spinning = true;
      axios
        .request(options)
        .then((response) => {
          console.log(response.data.data);
          this.area_price = apex_bar_horizontal(
            response.data.data.qx_price_list.series,
            response.data.data.qx_price_list.labels,
            "平均价格: "
          );
          this.comm_price = apex_bar_horizontal(
            response.data.data.xq_price_list.series,
            response.data.data.xq_price_list.labels,
            "平均价格: "
          );
          this.general_pie_ndger(
            "cqdecoration",
            response.data.data.decoration_list
          );
          this.general_pie_ndger(
            "houseusedecoration",
            response.data.data.purpose_list
          );
          this.general_pie_ndger(
            "houseorientation",
            response.data.data.orientation_list
          );
          this.qx_fy_list = apex_treemap(response.data.data.qx_num_list);
          this.orientation_charts_option = apex_radialBar(
            response.data.data.orientation_list_apex.series,
            response.data.data.orientation_list_apex.labels
          );
          this.house_price_change = apex_datetime_line(
            response.data.data.cq_house_price.series,
            response.data.data.cq_house_price.labels,
            "平均价格: "
          );
          this.danjia_charts_option = apex_bar_horizontal(
            response.data.data.danjia_clustering.series,
            response.data.data.danjia_clustering.labels
          );
          console.log(
            "treemap结果:",
            apex_bar_horizontal(
              response.data.data.danjia_clustering.labels,
              response.data.data.danjia_clustering.series
            )
          );
          this.spinning = false;
        })
        .catch(function (error) {
          console.error(error);
        });
    },
  },
};
</script>
<style>
.HomeView {
  flex: 1;
  background-color: #f6f6f7;
  height: 100vh;
  overflow-y: auto;
}
.ant-spin-text {
  color: #887ef2;
}
.ant-spin-nested-loading > div > .ant-spin {
  min-height: 100vh !important;
}
.box-shadow {
  box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
}
.flex {
  display: flex;
}
.flexbox {
  display: flex;
  justify-content: space-evenly;
  max-width: 100%;
}

.databox {
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}

.flexrow {
  flex-direction: row;
  justify-content: flex-start;
}

#newCharts {
  width: 50%;
  height: 100px;
}

#scatterCharts {
  width: 105px;
  height: 10rem;
}

#horizontalCharts {
  width: 100rem;
  height: calc(25rem + 10px);
}
#horizontalCharts2 {
  width: 100rem;
  height: calc(25rem + 10px);
}
#cqdecoration {
  width: 100rem;
  height: 370px;
}
#houseusedecoration {
  width: 100rem;
  height: 370px;
}
#houseorientation {
  width: 100rem;
  height: 370px;
}
#scatterCharts2 {
  width: 100rem;
  height: 13rem;
}
</style>
